<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="snake.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="fi/class.js"></script>
    <script src="snake.js"></script>
    <title>蛇形轮播图</title>
</head>

<body>
    <div id="snake"></div>
    <!--<div class="box">
        <img src="imgs/1.jpg" class="img1 active">
        <img src="imgs/2.jpg" class="img2 left">
        <img src="imgs/3.jpg" class="img3 right">
        <i class="fa fa-chevron-left btn-left"></i>
        <i class="fa fa-chevron-right btn-right"></i>
    </div>-->
</body>
<script>
    $("#snake").snake();
    // $(".btn-left").on("click", function(e) {
    //     var arr1 = $(".img1")[0].src.split(".");
    //     var indexArr1 = arr1[arr1.length - 2].split("/");
    //     var index1 = indexArr1[indexArr1.length - 1];
    //     console.log(index1);
    //     index1--;
    //     if (index1 < 1) {
    //         index1 = 3;
    //     }
    //     $(".img1")[0].src = "imgs/" + index1 + ".jpg";

    //     var arr2 = $(".img2")[0].src.split(".");
    //     var indexArr2 = arr2[arr2.length - 2].split("/");
    //     var index2 = indexArr2[indexArr2.length - 1];
    //     console.log(index2);
    //     index2--;
    //     if (index2 < 1) {
    //         index2 = 3;
    //     }
    //     $(".img2")[0].src = "imgs/" + index2 + ".jpg";

    //     var arr3 = $(".img3")[0].src.split(".");
    //     var indexArr3 = arr3[arr3.length - 2].split("/");
    //     var index3 = indexArr3[indexArr3.length - 1];
    //     console.log(index3);
    //     index3--;
    //     if (index3 < 1) {
    //         index3 = 3;
    //     }
    //     $(".img3")[0].src = "imgs/" + index3 + ".jpg";
    // })
    // $(".btn-right").on("click", function(e) {
    //     var arr1 = $(".img1")[0].src.split(".");
    //     var indexArr1 = arr1[arr1.length - 2].split("/");
    //     var index1 = indexArr1[indexArr1.length - 1];
    //     console.log(index1);
    //     index1++;
    //     if (index1 > 3) {
    //         index1 = 1;
    //     }
    //     $(".img1")[0].src = "imgs/" + index1 + ".jpg";

    //     var arr2 = $(".img2")[0].src.split(".");
    //     var indexArr2 = arr2[arr2.length - 2].split("/");
    //     var index2 = indexArr2[indexArr2.length - 1];
    //     console.log(index2);
    //     index2++;
    //     if (index2 > 3) {
    //         index2 = 1;
    //     }
    //     $(".img2")[0].src = "imgs/" + index2 + ".jpg";

    //     var arr3 = $(".img3")[0].src.split(".");
    //     var indexArr3 = arr3[arr3.length - 2].split("/");
    //     var index3 = indexArr3[indexArr3.length - 1];
    //     console.log(index3);
    //     index3++;
    //     if (index3 > 3) {
    //         index3 = 1;
    //     }
    //     $(".img3")[0].src = "imgs/" + index3 + ".jpg";
    // })
</script>

</html>